<template>
	<div>
	  <div class="title">去哪儿</div>
	  <ul>
	  	<li class="item" v-for="item of list" :key="item.id">
	  		<div class="item-img-wrapper">
	  			<img  class="item-img " :src="item.imgUrl" />
	  		</div>
	  		<div class="item-info">
	  			<p class="item-title">{{item.title}}</p>
	  			<p class="item-desc">{{item.desc}}</p>
	  		</div>
	  	</li>
	  </ul>
	</div>
</template>

<script>
	export default {
		name: 'HomeRecommend',
		props: {
			list: Array
		}
	}
</script>

<style lang="stylus" scoped="scoped">
@import '~styles/mixins.styl'
   .title
    margin-top:2px
    line-height: 40px
    background:#eee
    text-indent: 15px
    font-size:16px
   .item-img-wrapper
    height:0
    overflow:hidden
    padding-bottom:37.09%
    .item-img
     width:100%
   .item-info
    padding:5px 10px;
   .item-title
     ellipsis ()
     line-height:27px
     font-size:16px
   .item-desc
     ellipsis ()
     line-height:20px
     color:#ccc
  
</style>